import React,{useState,useEffect} from "react";
import { NavBar, Space, Toast, Button, Modal, Divider, Input, ProgressBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom"
import "../css/zyh_wdsc.css"
import img1 from "../image/1.png"
import img2 from "../image/2.png"
import img3 from "../image/3.png"
import img4 from "../image/4.png"
import img5 from "../image/5.png"
import img6 from "../image/6.png"
const Zyh_wdsc = () => {
    const router = useNavigate()
    const back = () => {
        router("/layouts/user")
    }
    const [list,setlist] = useState([
        {id:1,name:"收藏1",imageurl:img1,"love":130},
        {id:2,name:"收藏2",imageurl:img2,"love":210},
        {id:3,name:"收藏3",imageurl:img3,"love":117},
        {id:4,name:"收藏4",imageurl:img4,"love":310},
        {id:5,name:"收藏5",imageurl:img5,"love":103},
        {id:6,name:"收藏6",imageurl:img6,"love":160}
    ])
    return (
        <div className="zyh_wdsc">
            <NavBar onBack={back} style={{ color: "white" }}>我的收藏</NavBar>
            <div className="zyh_wdsc_content">
                {
                    list.map((item,index)=>{
                        return (
                            <div className="zyh_wdsc_item" key={item.id} style={{backgroundImage:`url(${item.imageurl})`,backgroundSize:"cover"}}>
                                <div className="zyh_wdsc_item_small">
                                    <svg t="1735801634375" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283" width="20" height="20"><path d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z" fill="#d81e06" p-id="4284"></path></svg>
                                    <span style={{color:"black"}}>{item.love}</span>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}
export default Zyh_wdsc